<template>
  <div class="page_padding out_main">
    <div class="notice_con">
      <div class="meeting-view">
        <div class="week-con">
          <div class="week-calendar">
            <div class="calendar-month">
              <div class="info">
                <!-- <div class="info_right">每日统计</div> -->
              </div>
              <div class="time" @click="timeChoose(dutyTime)">
                {{ dutyTime }}
                <van-icon name="arrow-down" />
              </div>
            </div>
            <div class="calendar-day">
              <Calendar ref="calendar" pageTypes="1" @selectDate="selectDate"></Calendar>
            </div>
          </div>
          <div class="week-list" v-if="weekList.length">
            <div class="week-li" v-for="(item, index) in recentMeet(weekList)" :key="index">
              <div class="li-tit">{{ item.meetingTime }}</div>
              <div class="li-con">
                <div class="li-con_lis" v-for="li in item.meetingInfo" :key="li.id">
                  <div class="lis-left">{{ getTime(li.meetingTime) }}</div>
                  <div class="lis-center">
                    <div class="lis-top">{{ li.meetingName }}</div>
                    <div class="lis-bottom">参会人员：{{ li.participants }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="week-list" v-else>
            <van-empty>暂无会议</van-empty>
          </div>
        </div>
        <van-popup v-model="showTime" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="请选择时间"
            @cancel="showTime = false"
            @confirm="timeConfirm" />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import { getlistMeetingPages } from '@api/api-meet.js'
import Calendar from '@/views/outDutyNew/components/calendar.vue'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'MeetingView',
  components: { Calendar },
  props: {},
  filters: {},
  data() {
    return {
      startDate: moment().startOf('month').format('YYYY-MM-DD'),
      endDate: moment().endOf('month').format('YYYY-MM-DD'),
      weekList: [],
      showTime: false, // 是否展示时间弹出层
      currentDate: new Date(), // 当前时间
      dutyTime: '', // 统计选择时间
      dutyYear: '',
      dutyMonth: '',
      chooseDay: moment().format('YYYY-MM-DD'),
    }
  },
  watch: {},
  created() {
    const date = new Date()
    const y = date.getFullYear()
    const m = date.getMonth() + 1
    this.dutyTime = String(y) + '年' + String(m) + '月'
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.calendar.getHeight()
    })
  },
  methods: {
    getData() {
      const param = {
        current: 1,
        size: 1100,
        startTime: this.startDate,
        endTime: this.endDate,
        fuzzyQuery: '',
        dataType: '2',
      }
      getlistMeetingPages(param).then(res => {
        const dealData = []
        const day = []
        res.data.records.forEach(item => {
          if (item.meetingStatus !== '5') {
            let str = ''
            const startDate = moment(item.meetingTime.slice(0, 10))
            const endDate = moment(item.meetingTime.slice(17))
            const dates = []

            while (startDate.isSameOrBefore(endDate, 'day')) {
              dates.push(startDate.format('YYYY-MM-DD'))
              startDate.add(1, 'day')
            }
            dates.forEach(li => {
              if (day.includes(li)) {
                const idx = dealData.findIndex(li1 => {
                  return li1.meetingDay === li
                })
                dealData[idx].meetingInfo.push(item)
              } else {
                str =
                  moment(li).format('M') +
                  '月' +
                  moment(li).format('D') +
                  '日 ' +
                  moment(li).format('dddd').replace('星期', '周')
                day.push(li)
                dealData.push({
                  meetingDay: li,
                  meetingTime: str,
                  meetingInfo: [item],
                })
              }
            })
          }
        })
        dealData.sort((a, b) => {
          return moment(a.meetingDay).format('YYYYMMDD') - moment(b.meetingDay).format('YYYYMMDD')
        })
        const monthDays = []
        const start = moment(this.startDate)
        const end = moment(this.endDate)
        while (start.isSameOrBefore(end, 'day')) {
          monthDays.push(start.format('YYYY-MM-DD'))
          start.add(1, 'day')
        }
        const calendarList = []
        monthDays.forEach(item => {
          const index = dealData.findIndex(li => {
            return li.meetingDay === item
          })
          if (index !== -1) {
            calendarList.push(dealData[index])
          } else {
            calendarList.push({
              meetingDay: item,
              meetingInfo: [],
              meetingTime: '',
            })
          }
        })
        this.weekList = dealData
        const data = {
          info: calendarList,
          time: this.startDate,
        }
        this.$refs.calendar.calendarShowData(data)
      })
    },
    // 登记列表跳转详情
    goDetail(item) {
      this.$router.push({
        path: '/meetDetail',
        query: {
          id: item.id,
          status: item.status,
          userType: this.userType,
          processInstanceId: item.processInstanceId,
          taskId: item.taskId,
          firstType: this.firstType,
          active: '1',
        },
      })
    },
    // 选择时间
    timeChoose(time) {
      this.showTime = true
      if (time) {
        const y = time.slice(0, 4)
        const m = time.slice(5, time.length - 1)
        this.currentDate = new Date(y, m - 1)
      } else {
        this.currentDate = new Date()
      }
    },
    // 时间确定
    timeConfirm() {
      this.showTime = false
      const date = new Date(this.currentDate)
      const y = date.getFullYear()
      const m = date.getMonth() + 1
      this.chooseTime = String(y) + '年' + String(m) + '月'
      this.dutyTime = String(y) + '年' + String(m) + '月'
      this.dutyYear = String(y)
      this.dutyMonth = String(m)
      this.startDate = moment(date).startOf('month').format('YYYY-MM-DD')
      this.endDate = moment(date).endOf('month').format('YYYY-MM-DD')
      this.getData()
    },
    // 获取当前日的信息
    selectDate(data) {
      if (data.timeOne) {
        this.startDate = data.timeOne
      } else {
        this.startDate = moment().format('YYYY-MM') + '-' + data.content
        this.startDate = moment(this.startDate).format('YYYY-MM-DD')
      }
      this.chooseDay = data.meetingDay
      // this.getData()
    },
    recentMeet(list) {
      const arr = []
      list.forEach(item => {
        if (moment(item.meetingDay).format('YYYYMMDD') >= moment(this.chooseDay).format('YYYYMMDD')) {
          arr.push(item)
        }
      })
      return arr
    },
    getTime(time) {
      if (time.includes('null')) {
        return ''
      } else {
        const arr = time.split('~')
        const arr1 = arr[0].split(' ')
        const arr2 = arr[1].split(' ')
        if (arr1[0] === arr2[0]) {
          return arr1[0] + ' ' + arr1[1] + '--' + arr2[1]
        } else {
          return time
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.out_main {
  padding-top: 0 !important;
}
.notice_con {
  padding: 3px 0 10px;
  width: 100%;
  height: 100%;
  .meeting-view {
    font-size: 14px;
    height: 100%;
    color: #333333;
    .week-con {
      height: 100%;
      // display: flex;
      // flex-direction: column;
      .week-calendar {
        padding-bottom: 5px;
        border-bottom: 1px solid #e4e4e4;
        .calendar-month {
          font-size: 15px;
          margin: 9px 14px 0;
          color: #666666;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // border-bottom: 1px solid #efefef;
          .info {
            color: #333333;
            padding: 6px 15px;
            .info_right {
              font-size: 15px;
              font-weight: bold;
            }
          }
          .time {
            font-size: 15px;
            color: #333;
            margin-right: 10px;
          }
          /deep/.van-icon-arrow {
            font-size: 15px;
            margin-right: 13px;
          }
        }
        .calendar-day {
        }
      }
      .week-list {
        // flex: 1;
        // overflow-y: auto;
        padding: 7px 14px;
        .week-li {
          margin: 7px 0 16px;
          .li-tit {
            font-size: 15px;
            font-weight: 600;
          }
          .li-con {
            margin: 10px 0;
            box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
            padding: 7px;
            border-radius: 12px;
            .li-con_lis {
              display: flex;
              align-items: center;
              padding: 7px 0;
              border-bottom: 1px solid #dcdcdc;
              .lis-left {
                width: 90px;
                min-width: 90px;
                font-size: 12px;
              }
              .lis-center {
                padding: 4px 7px;
                border-left: 1px solid #1188ff;
                flex: 1;
                .lis-top {
                  margin-bottom: 4px;
                  font-weight: 600;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
